<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://cdn.bootcss.com/amazeui/2.7.2/css/amazeui.min.css" rel="stylesheet">
    <style>
        body,
        html {
            margin: 0;
            width: 100%;
        }
        
        .content {
            width: 1220px;
            margin: 50px auto;
        }
        
        .import_btn {
            height: 40px;
            line-height: 40px;
            position: relative;
        }
        
        .import_btn button {
            width: 147px;
        }
        
        .import_btn input {
            position: absolute;
            top: 10px;
            opacity: 0
        }
        
        .import_btn span {
            font-size: 20px;
            font-weight: 900;
        }
        
        .import_select {
            height: 30px;
            line-height: 30px;
            margin: 70px 0 40px 0;
        }
        
        .import_select select {
            width: 68%;
        }
        
        .import_input {
            height: 350px;
            margin-bottom: 50px;
        }
        
        .import_input textarea {
            height: 350px;
            width: 100%;
            resize: none;
        }
        
        .import_api button {
            width: 100%;
            font-size: 20px;
        }
        
        .import_input #mail_log {
            position: relative;
            border: 1px solid #ABADB3;
            height: 350px;
            width: 100%;
            font-size: 14px;
            overflow-y: scroll;
        }
        
        .import_input .log_right {
            position: absolute;
            right: 10px;
        }
        
        .import_input .log_left {
            display: inline-block;
            width: 60%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .shop ,.agent{
            background-image: url('img/block.png');
            background-size: 16px;
            background-repeat: no-repeat;
            background-position:  95% center;
        }
    </style>

</head>

<body>
    <div class="content">
        <div class="import_btn">
            <div class="am-u-lg-2">
                <button type="button" class="am-btn am-btn-primary shop">商户导入</button>
                <input type="file" id="shop" onchange="importf(this)" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                />
            </div>
            <div class="am-u-lg-2">
                <button type="button" class="am-btn am-btn-primary agent">代理商导入</button>
                <input type="file" id="agent" onchange="importf(this)" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                />
            </div>

            <div class="am-u-lg-4 am-u-lg-offset-4">
                <p>
                    <span>收件人：</span><span id="addressee"></span>
                </p>
            </div>
        </div>
        <div class="import_select">
            <div class="am-u-lg-2">
                商户：
                <select name="" id="shop_select" class="shop_select" onchange="changeData(this)">
            </select>
            </div>
            <div class="am-u-lg-3">
                代理商：
                <select name="" id="agent_select" class="agent_select" onchange="changeAgentData(this)">
            </select>
            </div>
            <div class="am-u-lg-3 am-u-lg-offset-4">
                <p>
                    <span>邮件日志：</span>
                </p>
            </div>
        </div>
        <div class="import_input">
            <div class="am-u-lg-8">

                <textarea class="" id="shop_excel">
                    
                </textarea>
            </div>
            <div class="am-u-lg-3 am-u-lg-offset-1">
                <div id="mail_log">

                </div>
            </div>
        </div>
        <div class="import_api">
            <div class="am-u-lg-3">
                <button type="button" class="am-btn am-btn-success" onclick="sendMail()" data-am-modal="{target: '#my-alert'}">发送邮件</button>
            </div>
            <div class="am-u-lg-3 am-u-lg-offset-6">
                <button type="button" class="am-btn am-btn-success" onclick="downloadExl(shopData)" data-am-modal="{target: '#my-alert'}">导入日志</button>
            </div>
        </div>
    </div>
    <!--
        提示框
    -->
    <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
        <div class="am-modal-dialog">
            <div class="am-modal-bd">
                
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn">确定</span>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/amazeui/2.7.2/js/amazeui.min.js"></script>
<script src="js/xlsx.full.min.js"></script>
<script src="js/import.js"></script>

</html>